<template>
	<div class="three">
		<h1>{{ msg.tltl }}</h1>
    <currency-input label="Price" v-model="shuju.price" ></currency-input>
    <currency-input label="Shipping" v-model="shuju.shipping" ></currency-input>
    <currency-input label="Handling" v-model="shuju.handling" ></currency-input>
    <currency-input label="Discount" v-model="shuju.discount" ></currency-input>
    <p>Total: ${{ total }}</p>
  </div>
</template>

<script>
export default {
  name: 'three',
  data () {
    return {
      msg: {
        tltl: '这里是嵌套的页面'
      },
      shuju: {
        price: 0,
        shipping: 0,
        handling: 0,
        discount: 0
      }
    }
  },
  computed: {
    total: function () {
      console.log(this.shuju.price)
      return ((this.shuju.price * 100 + this.shuju.shipping * 100 + this.shuju.handling * 100 - this.shuju.discount * 100) / 100).toFixed(2)
    }
  }
}
</script>

<style scoped>
  /*six页面*/
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #0f0f0f;
	}
</style>
